<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a style="font-weight: 500;font-size: 16px;"
                        >智提升</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item
                    ><a style="font-weight: 500;font-size: 16px;"
                        >作业</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 16px;">{{ title }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="title">{{ title }}</div>
        <el-tabs v-model="type">
            <el-tab-pane label="课前练习" name="1"></el-tab-pane>
            <el-tab-pane label="随堂练习" name="2"></el-tab-pane>
            <el-tab-pane label="课后作业" name="3"></el-tab-pane>
            <el-tab-pane label="预习内容" name="4"></el-tab-pane>
        </el-tabs>
        <!-- start -->
        <nav-select :navData="arrBgCon1" @requData="changeInit"></nav-select>
        <!-- end -->
        <div class="testBody">
            <div class="searchBox">
                <div class="listTitle">{{ title }}列表</div>
                <div v-if="mockList.length != 0">
                    <el-radio-group
                        v-model="status"
                        size="small"
                        @change="radioChange"
                    >
                        <el-radio-button
                            :label="item1.title"
                            v-for="(item1, index1) in arrBgCon2"
                            :key="index1"
                        ></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <!-- 类型一 -->
            <div>
                <template v-if="mockList.length == 0">
                    <tips></tips>
                </template>
                <template v-else>
                    <div v-for="(item2, index2) in mockList" :key="index2">
                        <el-card class="box-card" shadow="hover">
                            <div
                                :class="[
                                    'which_status',
                                    item2.correct_state == 1
                                        ? 'which_status_type1'
                                        : item2.correct_state == 2 &&
                                          item2.type != 4
                                        ? 'which_status_type2'
                                        : item2.correct_state == 3
                                        ? 'which_status_type4'
                                        : item2.correct_state == 2 &&
                                          item2.type == 4
                                        ? 'which_status_type5'
                                        : 'which_status_type3'
                                ]"
                            >
                                <div class="rowBox">
                                    <div class="rowLeftBox">
                                        <div>
                                            <img
                                                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg"
                                            />
                                        </div>
                                        <div>
                                            <div class="testName">
                                                <el-tag
                                                    effect="plain"
                                                    size="mini"
                                                    >{{
                                                        item2.subject_name
                                                    }}</el-tag
                                                >
                                            </div>
                                            <div>{{ item2.name }}</div>
                                        </div>
                                    </div>
                                    <!-- 右 -->
                                    <div class="rowRightBox">
                                        <div class="rowRightItemBox">
                                            <div class="teacherName">
                                                <div style="text-align:center">
                                                    开始时间
                                                </div>
                                                <div>
                                                    {{ item2.start_time }}
                                                </div>
                                            </div>
                                            <div>
                                                <div style="text-align:center">
                                                    结束时间
                                                </div>
                                                <div>{{ item2.end_time }}</div>
                                            </div>
                                        </div>
                                        <div class="btnGround">
                                            <span
                                                style="color: #018854;"
                                                @click="
                                                    toTestReport(
                                                        item2.class_log_id
                                                    )
                                                "
                                                v-if="
                                                    item2.type != 4 &&
                                                        item2.correct_state == 2
                                                "
                                                >{{ reportName }}</span
                                            >
                                            <span
                                                style="color: #FFA442;margin-left:15px"
                                                @click="
                                                    toTopicWrong(
                                                        item2.class_log_id,
                                                        item2.type
                                                    )
                                                "
                                                v-if="
                                                    item2.type != 4 &&
                                                        item2.correct_state == 2
                                                "
                                                >查看错题</span
                                            >
                                            <span
                                                style="color: #3980ED;;margin-left:15px"
                                                @click="
                                                    toTopicAll(
                                                        item2.class_log_id,
                                                        item2.type
                                                    )
                                                "
                                                v-if="
                                                    item2.type != 4 &&
                                                        item2.correct_state == 2
                                                "
                                                >试题解析</span
                                            >
                                            <span
                                                style="color: #3980ED;"
                                                v-if="
                                                    item2.type != 4 &&
                                                        item2.correct_state ==
                                                            1 &&
                                                        item2.correct_type == 1
                                                "
                                                >自行批改</span
                                            >
                                            <span
                                                style="color: #3980ED;"
                                                v-if="
                                                    item2.type != 4 &&
                                                        item2.correct_state ==
                                                            1 &&
                                                        item2.correct_type == 2
                                                "
                                                >正在批改中...</span
                                            >
                                            <span
                                                style="color: #3980ED;"
                                                v-if="item2.correct_state == 0"
                                                @click="
                                                    beginTest(
                                                        item2.class_log_id
                                                    )
                                                "
                                                >{{ beginName }}</span
                                            >
                                            <span
                                                style="color: #3980ED;"
                                                v-if="
                                                    item2.type == 4 &&
                                                        item2.correct_state == 2
                                                "
                                                >已完成</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </template>
            </div>
            <!-- 页脚 -->
            <el-pagination
                style="text-align: center;margin-top: 20px;"
                background
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total"
                :hide-on-single-page="true"
            >
            </el-pagination>
        </div>
        <!-- 开始练习弹窗 -->
        <el-dialog
            :title="datas.name"
            :visible.sync="dialogTableVisible"
            center
            class="testBegin"
        >
            <div class="dialog-flex">
                <div class="flex-item">科目：{{ datas.subject_name }}</div>
                <div class="flex-item">开始时间:{{ datas.start_time }}</div>
                <div class="flex-item" style="justify-content: center;">
                    截止时间:{{ datas.end_time }}
                </div>
            </div>
            <div class="dialog-flex">
                <div class="flex-item">发布老师:{{ datas.teacher }}</div>
                <div class="flex-item">最晚提交时间:{{ datas.end_time }}</div>
                <div class="flex-item" style="justify-content:center;">
                    <div v-if="datas.total">总分：{{ datas.total }}</div>
                </div>
            </div>

            <div class="dialog-tip">
                未能按时完成练习则扣除10学情分，截止时间之前未完成作业视为缺练一次，扣除20学情分
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="toTest(datas.name)"
                    style="width:50%"
                    >{{ beginName1 }}</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getSubject } from "@/api/testQuestions/subject";
import navSelect from "@/components/navSelect/index";
import { getHomeworkList, createHomework } from "@/api/test/index";
import { getBriefTime } from "@/utils/timeUtils";
import tips from "@/components/tips/index";
export default {
    components: { navSelect, tips },
    props: {},
    data() {
        return {
            groupid: "",
            type: "1",
            reportName: "练习报告",
            beginName: "开始练习",
            title: "课前练习",
            total: 0, //题目总数
            pageSize: 6, //页面数量
            page: 1, //页数
            con1Current: 0,
            con2Current: 0,
            is_exam_type: 1,
            arrBgCon1: [], //科目列表
            arrBgCon2: [
                { title: "全部状态", status: "" },
                { title: "未完成", status: "0" },
                { title: "未批改", status: "1" },
                { title: "已批改", status: "2" },
                { title: "已超时", status: "3" }
            ], //状态列表
            status: "全部状态",
            mockList: [], //数据列表
            sid: null,
            correct_state: "",
            loading: null,

            // 弹窗
            dialogTableVisible: false, //是否显示弹窗
            datas: {},
            class_log_id: "", // 记录id
            answerTime: 0,
            beginName1: "开始练习"
        };
    },
    computed: {},
    watch: {
        type(newValue) {
            if (newValue) {
                this.page = 1;
                (this.status = "全部状态"), (this.correct_state = "");
                if (this.type == "4") {
                    this.arrBgCon2 = [
                        { title: "全部状态", status: "" },
                        { title: "未完成", status: "0" },
                        { title: "已完成", status: "2" },
                        { title: "已超时", status: "3" }
                    ];
                }

                switch (this.type) {
                    case "1":
                        this.title = "课前练习";
                        this.reportName = "作业报告";
                        this.beginName = "开始作业";
                        break;
                    case "2":
                        this.title = "随堂练习";
                        this.reportName = "练习报告";
                        this.beginName = "开始练习";
                        break;
                    case "3":
                        this.title = "课后作业";
                        this.reportName = "作业报告";
                        this.beginName = "开始作业";
                        break;
                    case "4":
                        this.title = "预习内容";
                        this.reportName = "预习报告";
                        this.beginName = "开始预习";
                        break;
                    default:
                        break;
                }

                if (this.is_exam_type == 1 && this.type == "1") {
                    this.beginName1 = "开始练习";
                } else if (
                    (this.is_exam_type == 1 && this.type == "3") ||
                    (this.is_exam_type == 1 && this.type == "2")
                ) {
                    this.beginName1 = "开始作业";
                } else if (this.is_exam_type == 1 && this.type == "4") {
                    this.beginName1 = "开始预习";
                } else if (this.is_exam_type == 2) {
                    this.beginName1 = "开始考试";
                }
                this.requData();
            }
        }
    },
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        // this.type = Number(this.$route.query.type);
        this.groupid = this.$route.query.groupid;
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
        this.getSubjectList();
        this.requData();
    },
    methods: {
        //获取科目列表
        getSubjectList() {
            var obj = {
                pagesize: 20,
                textbook: "renjiao"
            };
            getSubject(obj).then(res => {
                if (res.code === 200) {
                    this.subjectList = res.data;
                    this.sid = res.data[0].sid;
                    var subjectObj = {};
                    var max = 10;
                    if (res.data.length > max) {
                        subjectObj = {
                            fold: true,
                            index1: 0,
                            showTypeLength: max,
                            max: max,
                            checkName: "全部科目",
                            name: "科目",
                            list: res.data
                        };
                    } else {
                        subjectObj = {
                            max: max,
                            checkName: "全部科目",
                            name: "科目",
                            list: res.data
                        };
                    }
                    if (subjectObj.list) {
                        subjectObj.list.unshift({
                            subject_name: "全部科目",
                            sid: null
                        });
                    }
                    this.arrBgCon1.push(subjectObj);
                    // this.getSectionList(1, "", "", "", this.sLastPage);
                }
            });
        },
        //状态改变
        radioChange(e) {
            var status = this.arrBgCon2.filter(item => item.title == e);
            this.correct_state = status[0].status;
            this.page = 1;
            this.requData();
        },
        // 获取数据列表
        requData(sid) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            var data = {
                groupid: this.groupid,
                is_exam_type: this.is_exam_type,
                page: this.page,
                pagesize: 6
            };
            if (this.type != "0") {
                data.type = Number(this.type);
            }
            if (sid != null) {
                data.sid = sid;
            }
            if (this.correct_state != "") {
                data.correct_state = this.correct_state;
            }
            console.log("参数", data);
            getHomeworkList(data).then(res => {
                if (res.code == 200) {
                    this.total = res.data.total;
                    var data = res.data.data;
                    var task = [];
                    for (var i = 0; i < data.length; i++) {
                        var obj = {};
                        obj.name = data[i].name;
                        obj.sid = data[i].sid;
                        obj.subject_name = data[i].subject_name;
                        obj.start_time = getBriefTime(data[i].start_time);
                        obj.end_time = getBriefTime(data[i].end_time);
                        if (data[i].submit_time != null) {
                            obj.submit_time = getBriefTime(data[i].submit_time);
                        }
                        obj.correct_state = data[i].correct_state;
                        obj.class_log_id = data[i].class_log_id;
                        obj.correct_type = data[i].correct_type;
                        obj.type = data[i].type;
                        task.push(obj);
                    }
                    this.mockList = task;
                    console.log("mockList", this.mockList);
                    this.loading.close();
                } else {
                    this.mockList = [];
                    this.total = 0;
                    this.loading.close();
                }
            });
        },
        handleCurrentChange(currentPage) {
            this.page = currentPage;
            this.requData();
        },
        // 科目变化时初始化
        changeInit(sid) {
            this.page = 1;
            (this.status = "全部状态"), (this.correct_state = "");
            this.requData(sid);
        },
        // 开始考试
        beginTest(class_log_id) {
            this.class_log_id = class_log_id;
            var data1 = {
                class_log_id: class_log_id,
                is_exam_type: this.is_exam_type,
                type: Number(this.type)
            };
            getHomeworkList(data1).then(res => {
                if (res.code == 200) {
                    var data = res.data.data;
                    var obj = {};
                    obj.name = data[0].name;
                    obj.sid = data[0].sid;
                    obj.subject_name = data[0].subject_name;
                    let nd = new Date().getTime() / 1000;
                    this.answerTime = data[0].end_time - nd;
                    obj.start_time = getBriefTime(data[0].start_time);
                    obj.end_time = getBriefTime(data[0].end_time);
                    if (data[0].submit_time != null) {
                        obj.submit_time = getBriefTime(data[0].submit_time);
                    }
                    obj.correct_state = data[0].correct_state;
                    obj.total = data[0].total;
                    obj.teacher = data[0].tcName;
                    this.datas = obj;
                } else {
                    this.datas = [];
                }
                this.dialogTableVisible = true;
            });
        },
        // 前往作业
        toTest(name) {
            var data = {
                class_log_id: this.class_log_id
            };
            createHomework(data).then(res => {
                if (res.code == 200) {
                    var user_log_id = res.data.user_log_id;
                    if (this.type != "4") {
                        this.$router.push({
                            path: "/work/beginWork/index",
                            query: {
                                user_log_id: user_log_id,
                                class_log_id: this.class_log_id,
                                name: name,
                                type: Number(this.type),
                                answerTime: this.answerTime
                            }
                        });
                    } else {
                        this.$router.push({
                            path: "/work/preview/list/index",
                            query: {
                                user_log_id: user_log_id
                            }
                        });
                    }
                }
            });
        },
        // 前往测验报告
        toTestReport(class_log_id) {
            this.$router.push({
                path: "/test/testReport/index",
                query: {
                    class_log_id: class_log_id,
                    type: this.type
                }
            });
        },
        // 前往题目解析
        toTopicAll(class_log_id, type) {
            var is_exam_type = null;
            if (Number(type) == 0) {
                is_exam_type = 2;
            } else {
                is_exam_type = 1;
            }
            this.$router.push({
                path: "/topicAnalysis/all/index",
                query: {
                    class_log_id: class_log_id,
                    is_exam_type: is_exam_type
                }
            });
        },
        // 前往错题解析
        toTopicWrong(class_log_id, type) {
            var is_exam_type = null;
            if (Number(type) == 0) {
                is_exam_type = 2;
            } else {
                is_exam_type = 1;
            }
            this.$router.push({
                path: "/topicAnalysis/wrong/index",
                query: {
                    class_log_id: class_log_id,
                    is_exam_type: is_exam_type
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

.otherSelect {
    display: flex;
    align-items: center;
    margin: 20px 0 8px 0;
}
.testBody {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 25px;
    padding: 25px;
    box-sizing: border-box;
}
.searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.listTitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #2d3440;
}

.box-card {
    margin-top: 20px;
    position: relative;
}
.rowBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #6d7785;
    margin: 20px 0px;
}
.which_status:before {
    display: inline-block;
    position: absolute;
    text-align: center;
    width: 100px;
    height: 25px;
    color: #ffffff;
    top: 0px;
    left: 7px;
    transform: rotate(-45deg) translate(-30px, -12px);
}

.which_status_type1:before {
    content: "未批改";
    background-color: #00acfe;
}

.which_status_type2:before {
    content: "已批改";
    background-color: #00d5a2;
}

.which_status_type3:before {
    content: "未完成";
    background-color: #ff9900;
}
.which_status_type4:before {
    content: "已超时";
    background-color: #ff7171;
}
.which_status_type5:before {
    content: "已完成";
    background-color: #00d5a2;
}
.rowLeftBox {
    display: flex;
    align-items: center;
    line-height: 25px;
    img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin: 0 20px;
    }
    .testName {
        font-size: 14px;
        color: #2d3440;
        font-weight: 600;
    }
}
.rowRightBox {
    width: 640px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rowRightItemBox {
    display: flex;
    line-height: 25px;
    .teacherName {
        margin-right: 28px;
    }
}
.btnGround {
    min-width: 95px;
    margin-right: 20px;
    span {
        cursor: pointer;
    }
}
.timeED {
    width: 95px;
    text-align: right;
    margin-right: 20px;
}
/* ui样式修改 */
.el-radio-button__orig-radio {
    &:checked {
        & + .el-radio-button__inner {
            background-color: #018854;
        }
    }
}
.el-radio-button__inner {
    &:hover {
        color: #13ce66;
    }
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #ffffff;
    border: 1px solid #9ea4b0;
    border-radius: 4px;
}
.el-pagination {
    &.is-background {
        .el-pager {
            li {
                &:not(.disabled).active {
                    background-color: #018854;
                }
            }
        }
    }
}

// 弹窗
.dialog-flex {
    display: flex;
    align-items: center;
    margin: 15px 40px;
    .flex-item {
        display: flex;
        align-items: center;

        flex: 1;
        height: 30px;
    }
}
.dialog-tip {
    margin: 30px 40px;
    color: #f25427;
}
</style>
